<template>
  <div class="bread">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="data.name" v-for="(data, index) in historys" :key="index">
        <h5 style="display: inline-block">{{ data.meta.title }}</h5>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      historys: [{ name: 'chart', meta: { title: "首页" } }],

    };
  },
  watch: {
    $route() {
      var flag = false
      var i
      this.historys.forEach((history, index) => {
        console.log(history.name + ":" + this.$router.history.current.name)
        if (history.name == this.$router.history.current.name) {
          flag = true
          i = index
          console.log("index" + i)
        }

      })
      if (!flag) {
        this.historys.push(this.$router.history.current)
      } else {
        // console.log("前" + this.historys)
        this.historys.splice(i + 1, this.historys.length - 1)
        // console.log("后" + this.historys)
      }

    },
  },
  created() {
    console.log("router", this.$router.history);
  },
};
</script>

<style scoped>
.bread {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.bread span {
  font-size: 16px;
  /* font-weight: 900; */
}

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #606060 !important;
  /* font-weight: 400 !important; */
}

/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
  color: #409eff !important;
  /* font-weight: 800 !important; */
}
</style>